import * as React from 'react';
import * as _ from "underscore";

export interface ButtonProps {
    text?: string;
    style?: string;
    size?: string;
    disabled?: boolean;
    classes?: string[];
    onClick?: (...args: any[]) => void;
}

export class Button extends React.Component<ButtonProps, {}> {
    public className = 'media-button';

    handleClick(e) {
        e.preventDefault();
        if (this.props.onClick) {
            this.props.onClick();
        }
    }

    render() {
        let classes = ['button', this.className ],
            {style, size, text, disabled} = this.props;

        if (style) {
            classes.push('button-' + style);
        }

        if (size) {
            classes.push('button-' + size );
        }

        classes = _.uniq( classes.concat(this.props.classes || []));
        let className = classes.join(' ');
        return <button type="button" className={className} disabled={disabled} onClick={e => this.handleClick(e)}>{text ? text : this.props.children}</button>;
    }
}

(Button as React.ComponentClass<ButtonProps>).defaultProps = {
    text: '',
    style: '',
    size: 'large',
    disabled: false
};